import React, { useEffect } from 'react';
import { Form, Input, Switch, Button, Space } from 'antd';
import { QuestionBank } from '@/types/question';

interface QuestionBankFormProps {
  initialValues?: Partial<QuestionBank>;
  onSubmit: (values: Partial<QuestionBank>) => void;
  onCancel: () => void;
}

const QuestionBankForm: React.FC<QuestionBankFormProps> = ({
  initialValues,
  onSubmit,
  onCancel,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    } else {
      form.resetFields();
    }
  }, [initialValues, form]);

  const handleSubmit = (values: any) => {
    onSubmit(values);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleSubmit}
      initialValues={{
        is_public: false,
      }}
    >
      <Form.Item
        name="name"
        label="题库名称"
        rules={[
          { required: true, message: '请输入题库名称' },
          { max: 200, message: '名称不能超过200个字符' },
        ]}
      >
        <Input placeholder="例如：C++基础题库" />
      </Form.Item>

      <Form.Item
        name="description"
        label="题库描述"
        rules={[{ max: 500, message: '描述不能超过500个字符' }]}
      >
        <Input.TextArea
          rows={4}
          placeholder="请输入题库的描述信息"
        />
      </Form.Item>

      <Form.Item
        name="is_public"
        label="是否公开"
        valuePropName="checked"
      >
        <Switch checkedChildren="公开" unCheckedChildren="私有" />
      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">
            {initialValues ? '更新' : '创建'}
          </Button>
          <Button onClick={onCancel}>
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default QuestionBankForm;

